<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="language" content="en" />

	<title>Layout with Accordion</title>

        <!--
	<link rel="stylesheet" type="text/css" href="layout-default-latest.css" />
	<link rel="stylesheet" type="text/css" href="../lib/css/themes/base/jquery.ui.all.css" />
        -->
	<!-- CUSTOMIZE/OVERRIDE THE DEFAULT CSS -->
	<link rel="stylesheet" type="text/css" href="layout-default-latest.css" />
	<link rel="stylesheet" type="text/css" href="../jquery/development-bundle/themes/base/jquery.ui.all.css" />
        
	<style type="text/css">

	/* remove padding and scrolling from elements that contain an Accordion OR a content-div */
	.ui-layout-center ,	/* has content-div */
	.ui-layout-west ,	/* has Accordion */
	.ui-layout-east ,	/* has content-div ... */
	.ui-layout-east .ui-layout-content { /* content-div has Accordion */
		padding: 0;
		overflow: hidden;
	}
	.ui-layout-center P.ui-layout-content {
		line-height:	1.4em;
		margin:			0; /* remove top/bottom margins from <P> used as content-div */
	}
	h3, h4 { /* Headers & Footer in Center & East panes */
		font-size:		1.1em;
		background:		#EEF;
		border:			1px solid #BBB;
		border-width:	0 0 1px;
		padding:		7px 10px;
		margin:			0;
	}
	.ui-layout-east h4 { /* Footer in East-pane */
		font-size:		0.9em;
		font-weight:	normal;
		border-width:	1px 0 0;
	}
        
		.ui-layout-content {
			overflow:		auto; /* add scrolling to content-divs (panel-wrappers) */
			border-top:		0 !important; /* tab-buttons above this DIV already has a border-bottom */
		}

		/*
		 *	TAB-THEME ADJUSTMENTS
		 */
		.ui-tabs-nav li {
			white-space:	nowrap;
		}
		.ui-tabs-nav li a {
			font-size:		1em !important;
			padding:		4px 1.5ex 3px !important;
		}
		.ui-tabs-panel {
			font-size:		1em !important;
			padding:		0 1em !important;
		}
                
		.ui-layout-pane-center {
			background:	#FFD; /* to make pane background stand-out */
			padding:	10px;
			overflow:	hidden;
			}
			.ui-layout-pane-center .ui-tabs-nav {
				/* remove rounded corners from bottom of 'tabs'*/
				-moz-border-radius-bottomleft:		0;
				-moz-border-radius-bottomright:		0;
				-webkit-border-bottom-left-radius:	0;
				-webkit-border-bottom-right-radius:	0;
			}
          
        .ui-layout-resizer { /* all 'resizer-bars' */ 
                background: #DDD; 
        } 

        .ui-layout-toggler { /* all 'toggler-buttons' */ 
                background: #AAA; 
        } 
        
	</style>

	<!-- REQUIRED scripts for layout widget -->
        <!--
	<script type="text/javascript" src="../lib/js/jquery-latest.js"></script>
	<script type="text/javascript" src="../lib/js/jquery-ui-latest.js"></script>
	<script type="text/javascript" src="../lib/js/jquery.layout-latest.js"></script>
	<script type="text/javascript" src="../lib/js/jquery.layout.resizePaneAccordions-1.0.js"></script>

    <script type="text/javascript" src="../lib/js/themeswitchertool.js"></script> 
	<script type="text/javascript" src="../lib/js/debug.js"></script>
        -->
	<script type="text/javascript" src="jquery-latest.js"></script>
	<script type="text/javascript" src="jquery-ui-latest.js"></script>
	<script type="text/javascript" src="jquery.layout-latest.js"></script>
	<script type="text/javascript" src="jquery.layout.resizePaneAccordions-1.0.js"></script>

        <script type="text/javascript" src="themeswitchertool.js"></script> 
	<script type="text/javascript" src="debug.js"></script>        

	<script type="text/javascript">
	$(document).ready( function() {

		myLayout = $('body').layout({
			west__size:			300
		,	east__size:			300
			// RESIZE Accordion widget when panes resize
		,	west__onresize:		$.layout.callbacks.resizePaneAccordions
		,	east__onresize:		$.layout.callbacks.resizePaneAccordions
                ,  north__resizable: false
                ,  south__resizable: false                
		});

		// ACCORDION - in the West pane
		$("#accordion1").accordion({ fillSpace:	true });
		
		// ACCORDION - in the East pane - in a 'content-div'
		$("#accordion2").accordion({
			fillSpace:	true
		,	active:		1
		});


		// TABS-CENTER - sortable
			$(".ui-layout-center")
				.tabs({
					change: function () {  }
				})
				.find(".ui-tabs-nav")
					.sortable({ axis: 'x', zIndex: 2 })
			;
                        
		// THEME SWITCHER
		addThemeSwitcher('.ui-layout-north',{ top: '50px', right: '50px' });
		// if a new theme is applied, it could change the height of some content,
		// so call resizeAll to 'correct' any header/footer heights affected
		// NOTE: this is only necessary because we are changing CSS *AFTER LOADING* using themeSwitcher
		setTimeout( myLayout.resizeAll, 1000 ); /* allow time for browser to re-render with new theme */

	});
	</script>

</head>
<body>

<div class="ui-layout-north ui-widget-content" style="display: none;">
	<div style="float: right; margin-right: 160px;">
		<button onClick="resizeWidgets()">Resize</button> &nbsp;
		<button onClick="removeUITheme(); myLayout.resizeAll()">Remove Theme</button>
	</div>
	North Pane
</div>

<div class="ui-layout-south ui-widget-content ui-state-error" style="display: none;"> South Pane </div>

<DIV class="ui-layout-center">
	<UL>
		<LI><A href="#tabs-center-1">Nunc tincidunt</A></LI>
		<LI><A href="#tabs-center-2">Proin dolor</A></LI>
	</UL>
	<!-- add wrapper that Layout will auto-size to 'fill space' -->
	<DIV class="ui-layout-content ui-widget-content ui-corner-bottom">
		<DIV id="tabs-center-1">
			<P>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</P>
			<P>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</P>
		</DIV>
		<DIV id="tabs-center-2">
			<P>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</P>
		</DIV>
	</DIV><!--- END content-body --->
	<DIV class="ui-state-default" style="padding: 3px 5px 5px; text-align: center; margin-top: 1ex;"
	onMouseOver="$(this).addClass('ui-state-hover')" onMouseOut="$(this).removeClass('ui-state-hover')">
		Footer for the Center-pane
	</DIV>
</DIV><!--- END ui-layout-center --->

<div class="ui-layout-west" style="display: none;">
	<div id="accordion1" class="basic">

			<h3><a href="#">Section 1</a></h3>
			<div>
				<h5>West Pane</h5>
				<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. 
					Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</p>
				<p>Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. 
					Vestibulum a velit eu ante scelerisque vulputate.</p>
			</div>

			<h3><a href="#">Section 2</a></h3>
			<div>
				<h5>Sed Non Urna</h5>
				<p>Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus.
					Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit,
					faucibus interdum tellus libero ac justo.</p>
				<p>Vivamus non quam. In suscipit faucibus urna.</p>
			</div>

			<h3><a href="#">Section 3</a></h3>
			<div>
				<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
					Phasellus pellentesque purus in massa. Aenean in pede.</p>
				<p>Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, 
					magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
				<ul>
					<li>List item one</li>
					<li>List item two</li>
					<li>List item three</li>
				</ul>
			</div>

			<h3><a href="#">Section 4</a></h3>
			<div>
				<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
					ac turpis egestas.</p>
				<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
					Aenean lacinia mauris vel est.</p>
				<p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
					Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
			</div>

	</div>
</div>

<div class="ui-layout-east" style="display: none;">
	<h3 class="ui-widget-header">East Pane</h3>

	<div class="ui-layout-content">
		<div id="accordion2" class="basic">

			<h3><a href="#">Section 1</a></h3>
			<div>
				<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. 
					Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</p>
				<p>Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. 
					Vestibulum a velit eu ante scelerisque vulputate.</p>
			</div>

			<h3><a href="#">Section 2</a></h3>
			<div>
				<h5>Sed Non Urna</h5>
				<p>Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus.
					Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit,
					faucibus interdum tellus libero ac justo.</p>
				<p>Vivamus non quam. In suscipit faucibus urna.</p>
			</div>

			<h3><a href="#">Section 3</a></h3>
			<div>
				<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
					Phasellus pellentesque purus in massa. Aenean in pede.</p>
				<p>Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, 
					magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
				<ul>
					<li>List item one</li>
					<li>List item two</li>
					<li>List item three</li>
				</ul>
			</div>

			<h3><a href="#">Section 4</a></h3>
			<div>
				<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
					ac turpis egestas.</p>
				<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
					Aenean lacinia mauris vel est.</p>
				<p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
					Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
			</div>

		</div>
	</div>

	<h4 class="ui-widget-content ui-state-hover">Accordion inside DIV.ui-layout-content</h4>
</div>

</body>
</html> 